<template>  
  <div class="message-detail" v-if="message">  
    <h2>消息详情</h2>  
    <p><strong>发送者:</strong> {{ message.sender }}</p>  
    <p><strong>发送时间:</strong> {{ message.timestamp }}</p>  
    <p><strong>内容:</strong> {{ message.content }}</p>  
    <button @click="closeDetail">关闭</button>  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
    message: Object,  
  },  
  methods: {  
    closeDetail() {  
      this.$emit('close-detail');  
    },  
  },  
};  
</script>  
  
<style scoped>  
.message-detail {  
  width: 80%;  
  margin: 20px auto;  
  padding: 20px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
  background-color: #fff;  
}  
  
.message-detail button {  
  margin-top: 20px;  
  padding: 10px 20px;  
  border: none;  
  background-color: #007bff;  
  color: #fff;  
  cursor: pointer;  
}  
  
.message-detail button:hover {  
  background-color: #0056b3;  
}  
</style>